<template lang="pug">
  el-row(style="width:100%;height:100%")
    el-col(:span="24", style="width:100%;height:100%" )
      .grid-content.red-list(style="width:100%;height:100%")
        el-row.echats-content(:gutter="20")
          el-col(:span="8")
            .grid-content.bg-purple
              #showMapsData1
          el-col(:span="8")
            .grid-content.bg-purple
              #showMapsData2
          el-col(:span="8")
            .grid-content.bg-purple
              #showMapsData3
        .report-title 统计报表
        .report-date
          el-table(:data="tableData", :stripe="true", :border="false", style="width: 100%")
            el-table-column(prop="activityId", label="", width="65")
            el-table-column(prop="activityName", label="红包活动名称", width="470")
            el-table-column(prop="attendArea", label="参与县域数量", width="180")
            el-table-column(prop="attendStore", label="参与门店数量", width="180")
            el-table-column(prop="attendCategory", label="参与品种数", width="180")
            el-table-column(prop="scaneTimes", label="扫码总次数", width="180")
            el-table-column(prop="receiveNum", label="领取总个数", width="180")
            el-table-column(prop="receiveAmount", label="领取总金额 (元)", width="180")
        .report-pagination
          el-pagination(@size-change="paginationHandleSizeChange", @current-change="paginationHandleCurrentChange", :current-page.sync="currentPage", :page-sizes="[20, 40, 60, 80]", :page-size="100", layout="sizes, prev, pager, next", :total="1000")
</template>

<script>
  import {loadScripts} from '~/plugins/load-js-file'

  export default {
    data() {
      return {
        name: '',
        status: '',
        date1: '',
        date2: '',
        tableData: [{
          activityId: 1,
          activityName: '红包活动A',
          attendArea: 200,
          attendStore: 300,
          attendCategory: 400,
          scaneTimes: 999,
          receiveNum: 88,
          receiveAmount: 567.99
        }, {
          activityId: 1,
          activityName: '红包活动A',
          attendArea: 200,
          attendStore: 300,
          attendCategory: 400,
          scaneTimes: 999,
          receiveNum: 88,
          receiveAmount: 567.99
        }, {
          activityId: 1,
          activityName: '红包活动A',
          attendArea: 200,
          attendStore: 300,
          attendCategory: 400,
          scaneTimes: 999,
          receiveNum: 88,
          receiveAmount: 567.99
        }, {
          activityId: 1,
          activityName: '红包活动A',
          attendArea: 200,
          attendStore: 300,
          attendCategory: 400,
          scaneTimes: 999,
          receiveNum: 88,
          receiveAmount: 567.99
        }],
        currentPage: 5
      }
    },
    mounted: function () {
      const self = this;
      this.$nextTick(() => {
        // 将内容页高度设置100%
        const orderHeight = document.documentElement.clientHeight - 80;
        document.querySelector('.el-main').style.height = orderHeight + 'px';
        document.querySelector('.el-main').style.background = '#fff';
        //初始化图表
        this.initChart1(self);
        this.initChart2(self);
        this.initChart3(self);
      });
    },
    methods: {
      initChart1: function (self) {
        loadScripts([
          "//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
        ]).then(function () {
          return loadScripts([
            "//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js",
            "//cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js",
            "//cdn.jsdelivr.net/npm/echarts/map/js/china.min.js",
            "//cdn.jsdelivr.net/npm/simplex-noise/simplex-noise.js",
          ]);
        }).then(function () {
          let myChart = echarts.init(document.getElementById('showMapsData1'));
          myChart.showLoading();

          let option = {
            title : {
              text: '参与门店数量地区排名top 10',
              x:'center'
            },
            color: ['#e52a33'],
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : ['无为县', '朝阳区', '朝阳区', '东乡族自治县', '品川区', '寿光市', '芙蓉区'],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval: 0,
                  formatter:function(value)
                  {
                    return value.split("").join("\n");
                  }
                }
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'参与门店数量',
                type:'bar',
                barWidth: '60%',
                data:[10, 52, 200, 334, 390, 330, 220]
              }
            ]
          };

          setTimeout(function () {
            myChart.setOption(option);
            myChart.hideLoading();
          },1000)
        });
      },
      initChart2: function (self) {
        loadScripts([
          "//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
        ]).then(function () {
          return loadScripts([
            "//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js",
            "//cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js",
            "//cdn.jsdelivr.net/npm/echarts/map/js/china.min.js",
            "//cdn.jsdelivr.net/npm/simplex-noise/simplex-noise.js",
          ]);
        }).then(function () {
          let myChart = echarts.init(document.getElementById('showMapsData2'));
          myChart.showLoading();

          let option = {
            title: {
              text: '门店扫码次数排名top 10',
              x:'center'
            },
            color: ['#2a98e5'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['门店扫码次数排名'],
              x:'right'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: ['南京春回大地农资有限公司','江苏苏农农资连锁集团股份有限公司','江西沃尔得农资连锁集团股份有限公司','浙农集团股份有限公司','鑫辉农资','红太阳农资']
            },
            series: [
              {
                name: '门店扫码次数排名',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
              }
            ]
          };

          setTimeout(function () {
            myChart.setOption(option);
            myChart.hideLoading();
          },1000)
        });
      },
      initChart3: function (self) {
        loadScripts([
          "//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
        ]).then(function () {
          return loadScripts([
            "//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js",
            "//cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js",
            "//cdn.jsdelivr.net/npm/echarts/map/js/china.min.js",
            "//cdn.jsdelivr.net/npm/simplex-noise/simplex-noise.js",
          ]);
        }).then(function () {
          let myChart = echarts.init(document.getElementById('showMapsData3'));
          myChart.showLoading();
          let option = {
            title : {
              text: '红包活动参与门店数量统计',
              x:'center'
            },
            tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 20,
              bottom: 20,
              data: ['永通15周年活动庆典','店管家3周年'],
              selected: [{name: '永通15周年活动庆典',value: true},{name: '店管家3周年',value: true}]
            },
            series : [
              {
                name: '活动参与门店数量',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data: [{name: '永通15周年活动庆典',value: '2000'},{name: '店管家3周年',value: '1000'}],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

          setTimeout(function () {
            myChart.setOption(option);
            myChart.hideLoading();
          },1000)
        });
      },
      paginationHandleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      paginationHandleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style lang="scss">
  .echats-content {
    #showMapsData1 {
      height: 300px;
    }
    #showMapsData2 {
      height: 300px;
    }
    #showMapsData3 {
      height: 300px;
    }
  }

  .red-list {
    position: relative;
    height: 100%;
    .report-title {
      font-size: 18px;
      font-weight: 800;
      span {
        font-size: 13px;
        color: #999;
        font-weight: 500;
        margin-left: 20px;
      }
    }
    .report-content {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 1px #eee solid;
      width: 60%;
      padding: 20px 0;
      .el-col {
        border-right: 1px solid #ddd;
        &:last-child {
          border-right: none;
        }
      }
      .grid-content {
        text-align: center;
        .title {
          font-size: 12px;
          color: #999;
        }
        .value {
          font-size: 30px;
          color: $main-style-red;
        }
      }
    }
    .report-filter {
      position: relative;
      margin-top: 20px;
      .el-table__fixed-right {
        right: 20px;
        background-color: $main-style-red;
        color: #fff;
      }
    }
    .report-date {
      margin-top: 20px;
      td, th {
        border: 1px solid #ebeef5;
      }
      td:nth-child(3) .cell,
      td:nth-child(4) .cell,
      td:nth-child(5) .cell {
        font-size: 14px;
        cursor: pointer;
        color: $main-style-red;
      }
    }
    .report-pagination {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      margin: 0 auto;
      text-align: center;
    }
  }
</style>
